<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas仿支付宝芝麻信用特效 - 站长素材</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<style>
#box {
	width: 1000px;
	text-align: center;
	margin: 100px auto;
}
</style>
</head>
<body>
<div id="box">
    <canvas id="meter" width="360" height="220"></canvas>
    <canvas id="radar" width="538" height="370"></canvas>
</div>
<script src="chart.meter.js"></script>
<script src="chart.radar.js"></script>
<script>
window.onload = function(){
    Meter.setOptions({
        element: 'meter',
        centerPoint: {
            x: 180,
            y: 180
        },
        radius: 180,
        data: {
            value: 710,
            title: '职场竞争力{t}',
            subTitle: '评估时间：2015.07.28',
            area: [{
                min: 350, max: 550, text: '较弱'
            },{
                min: 550, max: 600, text: '一般'
            },{
                min: 600, max: 650, text: '很强'
            },{
                min: 650, max: 700, text: '超强'
            },{
                min: 700, max: 950, text: '极强'
            }]
        }
    }).init(); 

    Radar.setOptions({
        element: 'radar',
        radius: 140,
        polar: [
            { text: '简历信息', max: 190, icon: { sx: 0, sy: 0, w: 32, h: 33, l: -17, t: -60 } },
            { text: '职场身份', max: 190, icon: { sx: 32, sy: 0, w: 30, h: 33, l: 30, t: -30 } },
            { text: '九博成长', max: 190, icon: { sx: 61, sy: 0, w: 32, h: 33, l: 10, t: 0 } },
            { text: '职场活力', max: 190, icon: { sx: 93, sy: 0, w: 31, h: 33, l: -40, t: 0 } },
            { text: '人脉社交', max: 190, icon: { sx: 124, sy: 0, w: 29, h: 33, l: -60, t: -30 } }
        ],
        title: '{v}',
        data: [130, 130, 130, 148, 150],
        styles: {
            label: {
                image: 'icon.png'
            }
        }
    }).init();
}
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
